<template>
  <div>
    <Nav></Nav>
    <div class="one">
      <div class="two">
        <div>
          <el-form ref="form" :model="search">
            <div class="searchForm">
              <el-form-item label="项目名称" label-width="80px" prop="projectName">
                <el-input v-model="search.projectName" style="width: 200px" placeholder="请输入项目名称" clearable></el-input>
              </el-form-item>
              <el-form-item label="项目类型" label-width="80px" prop="projectType">
                <el-select v-model="search.projectType" placeholder="请选择项目类型" multiple clearable>
                  <el-option v-for="item in projectTypeLists" :key="item.orunid" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="紧急程度" label-width="80px" prop="emergencyLevel">
                <el-select v-model="search.emergencyLevel" placeholder="请选择紧急程度" clearable>
                  <el-option label="非常紧急" value="2"></el-option>
                  <el-option label="紧急" value="1"></el-option>
                  <el-option label="一般" value="0"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="searchForm">
              <el-form-item label="申请时间" label-width="80px" prop="createTime">
                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="search.createTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div>
          <el-button type="primary" @click="cmdSearch">搜索</el-button>
          <el-button type="info" @click="cmdReset">重置</el-button>
        </div>
      </div>
    </div>
    <div>
      <el-table :data="tableData" stripe style="width: 100%" @row-dblclick="dblclick">
        <el-table-column prop="processName" label="流程名称" align="center"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
        <el-table-column prop="currentNodeName" label="当前流程进度" width="180" align="center"></el-table-column>
        <el-table-column label="当前流程人" width="120" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.nextAuthor}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="flowPercent" label="进度" align="center" width="150px">
          <template slot-scope="scope">
            <el-progress v-if="+scope.row.flowPercent != 100" :percentage="+scope.row.flowPercent"></el-progress>
            <el-progress v-else :percentage="100" status="success"></el-progress>
          </template>
        </el-table-column>
        <el-table-column prop="addName" label="申请人" align="center"></el-table-column>
        <el-table-column prop="designUnit" label="设计单位" align="center"></el-table-column>
        <el-table-column prop="suggestedUnit" label="建设单位" align="center"></el-table-column>
        <el-table-column label="项目类型" width="180" align="center">
          <template slot-scope="scope">
            <el-tag v-for="(item, index) in getProjectTypeUtil(scope.row.projectType)" :key="index" :type="item=='消防'? 'success': (item=='安防'?'':(item=='防雷'?'warning': 'info'))">{{item}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="紧急程度" align="center" class="ooo" width="80">
          <template slot-scope="scope">
            <span v-html="formateStatus(scope.row.emergencyLevel)"></span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" align="center" width="180"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="checkOption(scope.row.orunid, scope.row.currentNodeID, scope.row.status)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginationStyle">
      <el-pagination v-if="total>0" background layout="total, prev, pager, next, jumper" :page-size="pageSize" @current-change="handleCurrentChange" :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
import { formateStatus, getProjectTypeUtil } from '@/unils/utils'
import { getAuditAllRecords, getFind, getAllProjectType } from '@/api/api'
import nav from '@/components/navigation'
export default {
  components: {
    Nav: nav
  },
  data () {
    return {
      search: {
        projectName: '',
        projectType: [],
        emergencyLevel: '',
        createTime: []
      },
      formateStatus: formateStatus,
      getProjectTypeUtil: getProjectTypeUtil,
      tableData: [],
      pageSize: 10,
      pageNum: 0,
      total: 0,
      projectTypeLists: []
    }
  },
  mounted () {
    this.getDatas()
    this.getProjectType()
  },
  methods: {
    getDatas () {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getAuditAllRecords(params)
        .then((res) => {
          // console.log(res)
          if (res.code == 200) {
            this.tableData = res.data.content
            this.total = res.data.totalElements
          } else {
            swal('错误', res.message || '网络连接错误', 'warning')
          }
        })
        .catch((err) => {
          swal('错误', '网络连接错误', 'error')
        })
    },
    handleCurrentChange (val) {
      this.pageNum = val - 1
      this.getDatas()
    },
    cmdSearch () {
      let params = {
        projectName: this.search.projectName,
        projectType: JSON.stringify(this.search.projectType),
        emergencyLevel: this.search.emergencyLevel,
        pageNo: this.pageNum,
        pageSize: this.pageSize,
        startTime: this.search.createTime[0],
        endTime: this.search.createTime[1]
      }
      getFind(params).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.tableData = res.data.content
          this.total = res.data.totalElements
        } else {
          swal('错误', res.message || '网络连接错误', 'warning')
        }
      }).catch((err) => {
        swal('错误', '网络连接错误', 'error')
      })
    },
    cmdReset () {
      this.$refs.form.resetFields()
      this.getDatas()
    },
    dblclick (row) {
      let id = row.orunid
      let nodeId = row.currentNodeID
      let status = row.status
      this.$router.push({ path: '/audit-process', query: { orunid: id, activeNames: ['1'], nodeId: nodeId, status: status } })
    },
    checkOption (id, nodeId, status) {
      this.$router.push({ path: '/audit-process', query: { orunid: id, activeNames: ['1'], nodeId: nodeId, status: status } })
    },
    // 获取项目类型
    getProjectType () {
      getAllProjectType().then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.projectTypeLists = res.data
        }
      }).catch((err) => { })
    }
  },
}
</script>
<style lang="less" scoped>
.one {
  line-height: 60px;
  .el-form {
    position: relative;
    top: 12px;
    margin-right: 10px;
  }
  .two {
    display: flex;
  }

  min-height: 60px;
  background-color: rgb(255, 255, 255);
  margin-bottom: 10px;
}
.searchForm {
  display: flex;
}
.el-tag {
  margin: 0 10px 5px 0;
}
</style>